<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/angular.js"></script>
	</head>

	<body ng-app="app">
		<hello>
			<br/>
			<span>原始的内容，</span><br/>
			<span>还会在这里。</span>
		</hello>
		<hello>
		</hello>
		<!--JS代码里面多了一个transclude: true，HTML代码里面在<hello>内部出现了子标签。
			按照我们在第一个例子中的说法，指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签。
			那好，如果我们自定义的标签内部出现了子标签，
			应该如何去处理呢？很显然，transclude就是用来处理这种情况的。
			对于当前这个例子，transclude的作用可以简化地理解成：把<hello>标签替换成我们所编写的HTML模板，
			但是<hello>标签内部的内容保持不变。
		-->
		<script>
			var appModule = angular.module('app', []);
    		appModule.directive('hello', function() {
		    return {
		        restrict: 'E',
		        template: '<div>Hi there <em ng-transclude></em></div>',
		        transclude: true,//将自定义标签里面的东西不发生变化
		        replace:true
		    };
});
		</script>
	</body>

</html>